<template>
    <van-nav-bar title="选择咖啡" left-text="" left-arrow @click-left="onClickLeft" />
    <van-tabs v-model:active="activeName">
        <van-tab title="赠送中" name="a" @click="showGive" v-if-else="flag">
            <Giveing v-for="item in list" :key="list.coupon_id" :arr="item" :firstTime="item.now_time.slice(0, 10)"
            :lastTime ="item.future_time.slice(0, 10)" ></Giveing>
        </van-tab>
        <van-tab title="已赠送" name="b" @click="showGive" v-if-else="flag">
            <Giveing v-for="item in list" :key="list.coupon_id" :arr="item" :firstTime="item.now_time.slice(0, 10)"
            :lastTime ="item.future_time.slice(0, 10)"></Giveing>
        </van-tab>
        <van-tab title="已收到" name="c" @click="showGive" v-if-else="flag">
            <Giveing v-for="item in list" :key="list.coupon_id" :arr="item" :firstTime="item.now_time.slice(0, 10)"
            :lastTime ="item.future_time.slice(0, 10)"></Giveing>
        </van-tab>
    </van-tabs>
</template>

<script setup>
//写三个组件 然后配子路由
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import Giveing from '@/components/discountCoupon/Giveing.vue'
import { getUserCoupon } from '@/api/api'

const router = useRouter()
const onClickLeft = () => {
    router.back()
}
const list = ref([])
const flag = null
const showGive = ()=>{
    flag = true
}
onMounted(async () => {
    const res = await getUserCoupon({ uId: 11 })
    list.value = res.list
    // const firstTime = res.list[0].now_time
    // const lastTime = res.list[0].future_time
    console.log(res);
    res.list.forEach(item => {
        const firstTime = item.now_time.slice(0, 10)
        const lastTime = item.future_time.slice(0, 10)

    });
    // console.log(firstTime)
    // console.log(lastTime)
    // console.log(res)
})
</script>

<style scoped>

</style>
